<template>
	<view class="splash-container">
		<view class="logo-section">
			<image class="logo" src="/static/logo.png" mode="aspectFit"></image>
			<text class="app-name">情绪大师</text>
			<text class="app-slogan">陪伴你的情绪管理之旅</text>
		</view>
		
		<view class="loading-section">
			<view class="loading-dots">
				<view class="dot" :class="{ active: loadingIndex >= 0 }"></view>
				<view class="dot" :class="{ active: loadingIndex >= 1 }"></view>
				<view class="dot" :class="{ active: loadingIndex >= 2 }"></view>
			</view>
			<text class="loading-text">正在初始化...</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loadingIndex: 0
			}
		},
		onLoad() {
			this.startLoading()
		},
		methods: {
			startLoading() {
				const timer = setInterval(() => {
					this.loadingIndex++
					if (this.loadingIndex >= 3) {
						clearInterval(timer)
						setTimeout(() => {
							this.checkAgreement()
						}, 500)
					}
				}, 300)
			},
			checkAgreement() {
				try {
					const agreementStatus = uni.getStorageSync('agreement_accepted')
					if (!agreementStatus) {
						uni.reLaunch({
							url: '/pages/agreement/agreement'
						})
					} else {
						uni.reLaunch({
							url: '/pages/index/index'
						})
					}
				} catch (e) {
					console.error('检查协议状态失败:', e)
					uni.reLaunch({
						url: '/pages/agreement/agreement'
					})
				}
			}
		}
	}
</script>

<style scoped>
	.splash-container {
		width: 100vw;
		height: 100vh;
		background: linear-gradient(135deg, #F5F7FA 0%, #C3CFE2 100%);
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		position: relative;
	}
	
	.logo-section {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 120rpx;
	}
	
	.logo {
		width: 200rpx;
		height: 200rpx;
		margin-bottom: 40rpx;
		border-radius: 50%;
		box-shadow: 0 8rpx 24rpx rgba(76, 175, 80, 0.3);
	}
	
	.app-name {
		font-size: 48rpx;
		font-weight: 600;
		color: #333333;
		margin-bottom: 20rpx;
		letter-spacing: 2rpx;
	}
	
	.app-slogan {
		font-size: 28rpx;
		color: #666666;
		text-align: center;
		line-height: 1.5;
	}
	
	.loading-section {
		position: absolute;
		bottom: 200rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	
	.loading-dots {
		display: flex;
		gap: 16rpx;
		margin-bottom: 30rpx;
	}
	
	.dot {
		width: 16rpx;
		height: 16rpx;
		border-radius: 50%;
		background-color: #E0E0E0;
		transition: all 0.3s ease;
	}
	
	.dot.active {
		background-color: #4CAF50;
		transform: scale(1.2);
	}
	
	.loading-text {
		font-size: 24rpx;
		color: #999999;
	}
</style>